<div class="header">
    <div class="w3ls-header">
        <div class="w3ls-header-left">
            <p>
                <a href="#"><img style="position: relative;left: -10px; top: -1px" src="./images/shopping.png">
                    XB全新高端购物平台
                </a>
            </p>
        </div>
        <div class="w3ls-header-right">
            <ul>
                <li class="dropdown head-dpdn">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"
                                                                                  aria-hidden="true"></i>{{userInfo.realName}}<span
                            class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="profile.html">个人中心</a></li>
                        <li @click="loginOut"><a href="javascript:;">注销</a></li>
                    </ul>
                </li>
                <li class="dropdown head-dpdn">
                    <a href="car.html" class="dropdown-toggle"><i class="fa fa-gift" aria-hidden="true"></i>购物车</a>
                </li>
                <li class="dropdown head-dpdn">
                    <a href="waitPay.html" class="dropdown-toggle"><i class="fa fa-credit-card-alt"
                                                                      aria-hidden="true"></i>待支付</a>
                </li>
            </ul>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="header-two">
        <div class="container">
            <div class="header-logo">
                <h1><a href="home.html"><span>X</span>Biao </a></h1>
                <h6>Your stores. Your place.</h6>
            </div>
            <div class="header-search">
                <form @submit.prevent>
                    <input type="search" v-model="title" name="Search" placeholder="Search for a Product..."
                           required="">
                    <button type="submit" @click="doSearch" class="btn btn-default">
                        <i class="fa fa-search" aria-hidden="true"> </i>
                    </button>
                </form>
            </div>
            <div class="header-cart">
                <div class="my-account">
                    <a href="javascript:;"></a>
                </div>
                <div class="cart">
                    <a href="car.html">
                        <button class="w3view-cart" type="submit" name="submit" value=""><i
                                class="fa fa-cart-arrow-down" aria-hidden="true"></i></button>
                    </a>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="header-three">
        <div class="container">
            <ul class="nav nav-pills nav-justified">
                <li v-for="product in productList" @click="toProductList(product)"><a href="javascript:;">{{product.name}}</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: ".header",
        data: {
            productList: [],
            title: '',
            userInfo: {}
        },
        methods: {
            loginOut: function () {
                axios({
                    url: "/user/loginOut"
                }).then(res => {
                    if (res.data.flag) {
                        //清除本地储存
                        localStorage.removeItem("loginUser");

                        //清空cookie
                        $.removeCookie("userId", {path: "/"});

                        // 跳转到首页
                        location.href = 'login.html';
                    } else {
                        layer.msg(res.data.message);
                    }
                });
            },
            findProduct: function () {
                axios({
                    url: "/home/findAllProduct"
                }).then(res => {
                    if (res.data.flag) {
                        this.productList = res.data.data;
                    }
                });
            },
            toProductList: function (product) {
                sessionStorage.setItem("product", JSON.stringify(product));
                location.href = "productList.html"
            },
            doSearch: function () {
                sessionStorage.setItem("searchTitle", this.title);
                location.href = "search.html"
            }
        },
        created: function () {
            this.findProduct();
            this.userInfo = JSON.parse(localStorage.getItem("loginUser"))
        }
    })
</script>